<template>
  <h2>setup 和 ref 的基本使用</h2>
  <h3>{{count}}</h3>
  <button @click="updateCount">更新数据</button>
</template>

<script lang="ts">

import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'App',
  // 需求：页面打开后可以直接看到一个数据，点击按钮后，该数据可以发生变化
  // vue2方式实现
  // data() {
  //   return {
  //     count: 0
  //   }
  // },

  // methods: {
  //   updateCount() {
  //     this.count++
  //   }
  // }

  // vue3方式实现
  // setup 是组合API的入口函数，只在初始化时执行一次
  setup() {
    // 此时的数据并不是响应式的数据
    //  let count = 0

    // ref是一个函数，作用：定义一个响应式的数据，返回的是一个Ref对象，对象中有一个value属性，如果需要对数据进行操作，需要使用该Ref对象调用value属性的方法进行数据的操作
    // html模板中是不需要使用.value属性的写法
    // count 对象的类型是Reference
    const count = ref(0) 
    console.log(count)

    function updateCount() {
       // 报错的原因：count是一个Ref对象，对象不能进行++操作
      //count++
      count.value++
    }
    // 返回的是一个对象
    return {
      count,
      updateCount
    }
  }
});
</script>